<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="styles/simditor.css" />

		<script type="text/javascript" src="site/assets/scripts/jquery.min.js"></script>
		<script type="text/javascript" src="site/assets/scripts/module.js"></script>
		<script type="text/javascript" src="site/assets/scripts/hotkeys.js"></script>
		<script type="text/javascript" src="site/assets/scripts/uploader.js"></script>
		<script type="text/javascript" src="site/assets/scripts/simditor.js"></script>
	</head>
	<body>
		<textarea id="editor" placeholder="Balabala" autofocus></textarea>
		<button id="submit">提交</button>
		<script type="text/javascript">
			// var editor = new Simditor({
			//   textarea: $('#editor')
			//   //optional options
			// });
			$(function() {
				// 初始化Simditor
				var editor = new Simditor({
					toolbar: [
						'title', // 标题
						'bold', // 加粗文字
						'italic', // 斜体文字
						'underline', // 下划线
						'strikethrough', // 删除线
						'|', // 控件分隔线
						'fontScale', // 字体大小
						'color', // 字体颜色
						'ol', // 有序列表
						'ul', // 无序列表
						'blockquote', // 引用
						'code', // 代码块
						'table', // 表格
						'link', // 链接
						'image', // 图片
						'hr', // 分割线
						'indent', // 向右缩进
						'outdent', // 向左缩进
						'alignment' // 水平对齐
					],
					textarea: $('#editor'),
					// 富文本框的placeholder属性
					placeholder: '请尽情输入吧！',
					// 顶部toolbar是否允许浮动
					// 如果允许浮动，则滚动页面时，toolbar会固定在网页顶部
					toolbarFloat: true,
					// 浮动偏移
					// 比如100，就是向下偏移100px
					// 网站可能会有浮动的导航条之类的，防止冲突
					toolbarFloatOffset: 100,
					// 隐藏toolbar
					toolbarHidden: false,
					// 插入图片时的默认图路径
					defaultImage: 'images/image.png',
					// 允许使用tab和shift+tab进行向左/向右缩进
					tabIndent: true,
					// 在textarea里添加隐藏input框
					// 键是input的name属性，值是value属性
					// 一般是用作表单提交时默认参数使用
					// 比如这个示例就会创建
					// <input type="hidden" name="from" value="simditor">
					// <input type="hidden" name="type" value="1">
					params: {
						type: '1',
						from: 'simditor'
					},
					// 图片按钮的功能
					// upload是上传图片功能
					// external是外链图片功能
					imageButton: ['upload', 'external'],
					// 图片上传接口设置
					upload: {
						// 图片上传接口路径
						url: 'upload.php',
						// 上传时的附加参数
						params: null,
						// 图片提交key
						fileKey: 'file',
						// 本地最大同时上传数
						connectionCount: 3,
						// 上传时退出的提示信息
						leaveConfirm: '正在上传中，你确定要退出吗？'
					},
					// 允许粘贴图片时快速上传
					pasteImage: false,
					// 粘贴时清除html样式
					cleanPaste: true,
					// 允许的标签列表
					allowedTags: ['br', 'span', 'a', 'img'],
					// 允许的标签属性列表
					allowedAttributes: {
						img: ['src', 'alt'],
						a: ['href', 'target'],
						font: ['color'],
						code: ['class']
					},
					// 允许的css样式列表
					allowedStyles: {
						span: ['color', 'font-size'],
						b: ['color'],
						i: ['color'],
						strong: ['color'],
						strike: ['color'],
						u: ['color'],
						p: ['margin-left', 'text-align'],
						h1: ['margin-left', 'text-align'],
						h2: ['margin-left', 'text-align'],
						h3: ['margin-left', 'text-align'],
						h4: ['margin-left', 'text-align']
					},
					// 插入代码支持的代码列表
					codeLanguages: [{
							name: 'C++',
							value: 'c++'
						}, {
							name: 'C#',
							value: 'cs'
						}, {
							name: 'CSS',
							value: 'css'
						}, {
							name: 'HTML,XML',
							value: 'html'
						}, {
							name: 'JSON',
							value: 'json'
						}, {
							name: 'Java',
							value: 'java'
						}, {
							name: 'JavaScript',
							value: 'js'
						},

						{
							name: 'Python',
							value: 'python'
						},

						{
							name: 'SQL',
							value: 'sql'
						}
					]
				});
				$("#submit").click(function() {
					console.log(editor.getValue());
				});
			});
		</script>
	</body>
</html>
